<template>
	<view class="containOvers">
		<view class="header-con">
			<view class="header-tab">
				<tabs ref="tabsRef" :list="tablist" :current="tabCur" @tabItemClick="tabSelect" marright="60rpx"
					activeWeight='700' fontSize="32rpx" activeColor="#000" barMargin="10" activeBarColor="#53A87F">
				</tabs>
				<!-- <text :class="{active: activeTab === index }" v-for="(item,index) in tabData" :key="index" @click="handleTabClick(index)">{{ item.text }}</text> -->
			</view>
		</view>
		<view class="order-ul" :class="{emptyActives:loadedList&&orderData.length<=0}" :style="{paddingBottom:isPhonex ? '160rpx !important':'120rpx !important'}">
			<scroll-view class="uni-bar-wbg" style="height:100%" scroll-y scroll-with-animation refresher-enabled="true"
				:refresher-triggered="refLoad" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
				<empty :empty="loadedList&&orderData.length<=0" :zIndexs="100"
					:imgUrl="'https://cdn-static.yekjx.com/'+'food/empty/images/empty_ico04.png'" content="暂无订单记录">
				</empty>
				<view class="order-li" v-for="(item,index) in orderData" :key="index" @click="initModal">
					<view class="order-li-title" v-if="item.vstatus=='206'&&item.billCancelTime>0">等待支付，还有 <text
							class="title-color">{{ item.billCancelTime}}</text> 分钟</view>
					<view class="order-li-text p_rlt">
						<view class="order-li-text-left">
							<text class="order-li-text-ws" v-if="item.vtype == '568'">自提</text>
							<!-- <text class="order-li-text-ws" v-if="item.vtype == 798">到家</text> -->
							<text class="order-li-text-ws order-li-text-tc" v-if="item.vtype_two  == '1185'">套餐</text>
							<!-- vstatus  206 待付款 -->
							<text class="order-li-text-dz"
								@click="changeAddress(item)">{{ truncateAddress(item.sellMemberName) }}<!-- <text v-if="item.vstatus=='206'" class="lg text-gray cuIcon-right margin-left-xxs"></text> --></text>
							<!-- <text class="posi" v-if="item.splicingOrders=='0'">拼单</text> -->
						</view>
						<!-- '206': { text: '待付款，剩余', time: '14:53 分' },
            	'1139': { text: '商家待接单，剩余', time: '14:53 分' },
            	'1140': { text: '商家已接单，正在备货中' },
            	'1142': { text: '骑手已接单' },
            	'1143': { text: '骑手已取餐' },
            	'1144': { text: '订单配送中' },
            	'61': { text: '订单已完成' },
            	'827': { text: '订单已完成' },
            	'310': { text: '已退款' },
            	'223': { text: '退款中' },
            	'224': { text: '退款中' },
            	'225': { text: '订单已取消' },
            	'819': { text: '待自提' } -->
						<view class="order-li-text-right">
							<text class="yijguoqi" v-if="item.vtype_two  == '1185' && item.service_status =='6'"
								:class="{flexClassguoqi:item.service_status =='6'}">
								<text class="flex justify-end">已过期</text>
								<!-- <text
									class="flex justify-end moneryTe"><text>余额</text>￥{{item.sxpDdx.total_balance_money }}</text> -->
							</text>
							<text v-else
								:class="{'order-li-text-fk': true, 'status-3-4-color': item.vstatus == '310'  || item.vstatus == '310' || item.vstatus == '61' ||  item.vstatus == '225' || item.vstatus == '223'|| item.vstatus == '297' || item.vstatus == '827','flexdis':item.vtype_two  == '1185' && item.service_status =='5' && item.total_balance_money <= minMonery}">
								<text
									:class="{'flexClass':item.vtype_two  == '1185' && item.vstatus !== '225' && item.service_status =='5' && item.sxpDdx.total_balance_money <= minMonery}">
									{{ item.vstatus === '225' ? '已取消' : item.vstatus_name }}</text>
								<text
									:class="{'flexClass':item.vtype_two  == '1185' && item.vstatus !== '225' && item.service_status =='5' && item.sxpDdx.total_balance_money <= minMonery}"
									v-if="item.vstatus !== '206'&&item.vstatus !== '225' && item.vstatus !== '61' && item.vtype_two  == '1185' && item.service_status =='5' && item.sxpDdx.total_balance_money <= minMonery">(余额不足)</text>
							</text>
						</view>
					</view>

					<view class="order-li-imglist" @click.stop="toDetails(item)"
						:style="{display:item.vtype_two  == '1185' ? 'block' : 'flex' }">
						<block v-if="item.vtype_two !== '1185'">
							<scroll-view class="scroll-view" scroll-x :scroll-with-animation="true"
								:scroll-left="scrollLeft" @touchend="handleTouchEnd">
								<view class="content-con point">
									<!-- 横向排列的内容 -->
									<view v-for="(imgList, index) in item.imageIds" :key="index" class="item">
										<tb-image width="100%" height="100%" borderRadius="10rpx"
											:src="env.imgBaseUrl+imgList">
											<template v-slot:error>
												<image src="../../../static/menuEmpty.png" class="img"
													mode="aspectFill">
												</image>
											</template>
										</tb-image>
										<!-- <image class="img" :src="env.imgBaseUrl+imgList" mode="aspectFill"></image> -->
									</view>
									<!-- <view>
                    <image class="img" :src="env.imgBaseUrl+item.billGoods[0].vmaster_product_image_id" mode=""></image>
                  </view> -->
									<!-- <view class="flex packageOption" v-if="item.billGoods[0].vtwo_type=='814'">
										<text class="dtaocan"	:style="{color:item.vstatus == '225' ? '#999' : '#666'}">{{item.billGoods[0].goodsSkuName}}</text>
									</view> -->
								</view>
							</scroll-view>
							<!-- <view class="order-li-imglist-left" v-if="false">
              	<view class="order-img-con" v-for="item in imgData" :key="item.id">
              		<image class="img" :src="item.imgSrc" mode=""></image>
              	</view>
              </view> -->
							<view class="order-li-imglist-right">
								<text class="order-li-imglist-pic">¥{{ item.ntotal_money||0 }}</text>
								<text class="order-li-imglist-num">共{{ item.totalsSells||0 }}件</text>
							</view>
						</block>
						<!-- 多套餐 -->
						<block v-else>
							<view class="content-con point justify-between align-center">
								<view class="flex">
									<view class="item">
										<tb-image width="100%" height="100%" borderRadius="10rpx"
											:src="env.imgBaseUrl+item.billGoods[0].vmaster_product_image_id">
											<template v-slot:error>
												<image src="../../../static/menuEmpty.png" class="img"
													mode="aspectFill">
												</image>
											</template>
										</tb-image>
										<!-- <image class="img" :src="env.imgBaseUrl+imgList" mode="aspectFill"></image> -->
									</view>
									<view class="flex flex-direction packageOption">

										<text class="dtaocan"
											:style="{color:item.vstatus == '225' ? '#999' : '#666'}">{{item.billGoods[0].goodsSkuName||''}}</text>
										<text class="fwyxianqi">服务有效期至：{{transTime(item.sxpDdx.end_time)}}</text>
									</view>
								</view>
								<view class="order-li-imglist-right">
									<text class="order-li-imglist-pic">¥{{ item.ntotal_money||0 }}</text>
								</view>
							</view>
						</block>
					</view>

					<view class="order-li-footer">
						<view class="order-l-f-left">
							<view class="men-posi" @click.stop="showMore($event,item,index)">更多</view>
							<view class="p_rlt ormbxline">
								<view class="morbox text-center text-lg down" :class="{show:item.show}">
									<view class="p_rlt padding-bottom">
										<!-- :class="!item.menuHandle||item.menuHandle&&item.menuHandle.length<=1?'padding-tb-xs':'padding-tb-xs'" -->
										<view class="mctbox sanjiao bg-white">
											<view v-for="(itemMenu,listIndex) in item.menuHandle" :key="listIndex"
												:class="{act: minfindex===listIndex}"
												@click.stop="footerSwitch(listIndex,item,itemMenu)" class="mpitm">
												{{ itemMenu.text }}
											</view>
											<!-- <view class="mpitm">
												退款
											</view> -->
										</view>
									</view>


								</view>
							</view>

							<!-- 小菜单 -->
							<!-- :class="{ activeShow: item.menuFlag == true }" -->
							<!-- <uni-transition :show="item.show" @change="change" :duration="300" :mode-class="modeClass"
								:styles="orderStyles" v-if="index+1!=orderData.length">
								<view class="order-footer-menu">
									<text @click.stop="footerSwitch(listIndex,item,itemMenu)"
										:class="{ active: minfindex==listIndex }"
										v-for="(itemMenu,listIndex) in item.menuHandle"
										:key="listIndex">{{ itemMenu.text }}</text>
								</view>
							</uni-transition>
							<uni-transition :show="item.show" @change="change" :duration="300" :mode-class="modeClass"
								:styles="orderStylesFinal" v-else>
								<view class="order-footer-menu">
									<text @click.stop="footerSwitch(listIndex,item,itemMenu)"
										:class="{ active: minfindex==listIndex }"
										v-for="(itemMenu,listIndex) in item.menuHandle"
										:key="listIndex">{{ itemMenu.text }}</text>
								</view>
							</uni-transition> -->
						</view>
						<view class="order-l-f-right">
							<text class="cancel" v-if="item.vstatus == '206' || item.vstatus == '1139' "
								@click="cancelOrderBtn(item)">取消订单</text>
							<!-- needInvoiceId 发票id-->
							<text class="cancel" v-if="item.needInvoiceId"
								@click.stop="mnavTo('/pages/others/completedDettial/completedDettial?needInvoiceId=' + item.needInvoiceId)">查看发票</text>
							<text class="payment" v-if="item.vstatus == '206' && item.billCancelTime > 0"
								@click.stop="toPays(item)">去支付</text>
							<!-- 225 交易关闭 988 已完成 987服务中 1185多套 827 待评价  224  退款中 310已退款  service_status多套餐是否过期  61已完成 206待付款-->
							<text @click.stop="tapOrderAg(item)"
								:class="{'anotherOrder': true, 'status-3-4-colorBg': item.vstatus == '310'  ||  item.vstatus == '225'  ||  item.vstatus == '61' || item.vstatus == '223' || item.vstatus == '827'}"
								v-if="item.vstatus !== '206' && item.vstatus != '1139' && item.vstatus != '987' && item.vtype_two!='1185'&&item.vtype_two!='1184'">再来一单</text>
							<text class="anotherOrder"
								v-if="item.vstatus=='987' && item.vtype_two=='1185' && item.service_status =='6'"
								@click.stop="dpBackMoney">人工客服</text>
							<text class="anotherOrder another-font"
								v-if="item.sxpDdx&&item.vstatus !== '206'&&item.vstatus !== '225' && item.vtype_two  == '1185' && item.vstatus !== '61' && item.service_status =='5' && item.sxpDdx.total_balance_money <= minMonery"
								@click.stop="mnavTo('/pages/user/recharge/recharge?cardId=' + item.sxpDdx.card_no)">我要充值</text>
							<text class="anotherOrder another-font"
								v-if="item.vtype_two == '1185' && item.vstatus =='987' && item.service_status == '5' && item.sxpDdx.total_balance_money > minMonery"
								@click.stop="edittimedz(index)">修改套餐时间/地址</text>
							<text class="payment"
								v-if="item.vtype_two == '1185' && item.vstatus =='987' && item.service_status =='5' && item.sxpDdx.total_balance_money > minMonery"
								@click.stop="mnavTo(`/pages/order/manyMeal/manyMeal?hasRecord=true&fbillId=${item.billGoods[0].vbill_id}&goodsId=${item.billGoods[0].vgoods_id}&sellerMemberId=${item.sell_member_id}`)">去约餐</text>
							<text class="payment" v-if="item.vstatus == '827'  || item.vstatus == '61'"
								@click.stop="mnavTo('/pages/user/evaluate/evaluate?vbill_id='+ item.vbill_id)">评价</text>
						</view>
					</view>
				</view>

				<view class="flex justify-center">
					<uni-load-more :status="loadStatus" iconType="circle"></uni-load-more>
				</view>
			</scroll-view>
		</view>
		<!-- 支付 -->
		<!-- <payType ref="payModal" sourec="immediately" :carNumber="60983214"  :totalPayPrice="immdelTotalMoney" :vbillid="immdeBillids"
      @paySuccess="paySuccess" :tabPages="true"></payType> -->
		<payType ref="payModal" source="immediately" :carNumber="(orderData[sxp_index]?.sxpDdx?.card_no) || 0"
			:totalPayPrice="immdelTotalMoney" :vbillid="immdeBillids" @paySuccess="paySuccess" :tabPages="true">
		</payType>
		<!-- 套餐退款提示 -->
		<refundTips ref="refundTipsRef" :totalPri="(orderData[sxp_index]?.sxpDdx?.total_balance_money) || 0" />
		<editTime ref="mealMate" :goodsId="orderData[sxp_index]?.billGoods[0].vgoods_id"
			:fbillId="orderData[sxp_index]?.billGoods[0].vbill_id"
			:mealsName="orderData[sxp_index]?.billGoods[0].goodsSkuName"></editTime>
		<tabbar :thisCurrent="curRoute"></tabbar>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, nextTick, computed } from 'vue';
	import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
	import tabs from '@/components/comtabs/comtabs.vue'
	import { getorderData, getorderRefundData, getremoveOrder, getCancelorder, billDetailRefund, getStoreList } from '@/api/vmeitime-http/index.js'
	import { mnavTo, showLoading, hideLoading, getCurRoute, getSystemPhoneX } from '@/utils/helper';
	import { getSellerConfig } from '@/utils/public';
	import mapi from '@/utils/mapi'
	import payType from "@/components/payType/payType.vue";
	import refundTips from '@/components/refundTips/refundTips.vue';
	import editTime from "@/components/setMealsModal/setMealsModal.vue";
	import { env } from '@/api/env.js';
	import { useShopStore } from '@/stores/shopStore';
	const shopStore = useShopStore();
	const pageInfo = ref({
		curPage: 1,
		pageSize: 10,
		backCupPage: 2
	})
	const minMonery = ref(0)  //随心配余额不足提示
	const sxp_index = ref(0)
	const isPhonex = ref<any>(false)
	const immdelTotalMoney = ref(0)
	const immdeBillids = ref('')
	const payModal = ref()
	const refundTipsRef = ref(null)
	const nowChangeState = ref("")
	const loadedList = ref(false) //是否加载数据
	const loadStatus = ref('noMore')
	const refLoad = ref(false)
	const tabsRef = ref()  //订单列表
	const modeClass = ref() ///小菜单动画效果
	const orderStyles = ref() //小菜单动画效果样式
	const orderStylesFinal = ref()
	const minfindex = ref(null)   //小菜单索引
	const activeTab = ref(0)
	const tabCur = ref(0) //订单列表
	// 滑动
	const scrollLeft = ref(0) //初始位置
	// const startX = ref(0) //触摸起
	// const moveX = ref(0) //
	// const diffX = ref(0)
	const isMoving = ref(null)
	const mealMate = ref(null) //修改多套餐时间地址弹窗
	const tablist = ref([
		{
			orderState: '',
			name: "全部"
		}, {
			orderState: '206',
			name: "待支付"
		}, {
			orderState: '827',
			name: "待评价"
		}, {
			orderState: '224',
			name: "退款"
		}
	])



	const orderData = ref([])

	// 截取字符串
	const truncateAddress = (str : String) => {
		if (str) {
			return str.length > 14 ? str.substring(0, 14) + '...' : str
		}
	}


	onLoad(() => {
		isPhonex.value = getSystemPhoneX();
		// getorderList()
		// orderStyles.value = {
		// 	position: "absolute",
		// 	top: 0,
		// 	left: "80rpx",
		// 	width: "126rpx",
		// 	padding: "10rpx 0",
		// 	flexShrink: 0,
		// 	zIndex: "999999",
		// 	borderRadius: '2px 2px 4px 4px',
		// 	backgroundColor: "#fff",
		// 	display: "flex",
		// 	flexDirection: "column",
		// 	justifyContent: "center",
		// 	boxShadow: '0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)'
		// }
		// orderStylesFinal.value = {
		// 	position: "absolute",
		// 	top: "-110rpx",
		// 	left: "80rpx",
		// 	width: "126rpx",
		// 	padding: "10rpx 0",
		// 	flexShrink: 0,
		// 	zIndex: "999999",
		// 	borderRadius: '2px 2px 4px 4px',
		// 	backgroundColor: "#fff",
		// 	display: "flex",
		// 	flexDirection: "column",
		// 	justifyContent: "center",
		// 	boxShadow: '0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)'
		// }
	})
	const curRoute = ref('')
	onShow(() => {
		uni.setStorageSync('isPageShown', true); //随心配
		curRoute.value = getCurRoute();
		// console.log( uni.getStorageSync('index_key')
		let indexNum = uni.getStorageSync('index_key')
		if (indexNum && indexNum !== null && indexNum !== undefined) {
			tabCur.value = Number(indexNum)
			let indexToState = {
				'0': '',
				'1': '206',
				'2': '827',
				'3': '224'
			};
			if (indexNum in indexToState) {
				nowChangeState.value = indexToState[indexNum];
			}
			// getorderList()
			// 清空缓存 'index_key'
			// uni.removeStorageSync('index_key');
		}
		orderData.value = []
		if (indexNum == 3) {
			loadList('refeash', 'getorderRefundData')
		} else {
			loadList('refeash')
		}
		nextTick(()=>{
			mealMate.value.upAdress()
		})
	})
	onHide(() => {
		uni.setStorageSync('index_key', 0);
		tabCur.value = 0
		nowChangeState.value = ''
		// uni.removeStorageSync('index_key')
		orderData.value.forEach(i => {
			i.show = false
		})
	})

	// const isBalanceInsufficient = computed((item) => {
	// 	return item.vtype_two === '1185' &&
	// 		item.vstatus !== '225' &&
	// 		item.service_status === '5' &&
	// 		Number(item.total_balance_money) <= 0;
	// });

	const handleTabClick = (index : any) => {
		activeTab.value = index
	}
	const toPays = (item : any) => {
		immdelTotalMoney.value = item.ntotal_money;
		immdeBillids.value = item.vbill_id || '';
		if (item.vtype_two == '1185') {
			payModal.value.wxPay(item.vbill_id)
			return
		}
		payModal.value?.open('bottom');
	}
	// const handleTouchStart = (e : any) => {
	//   startX.value = e.changedTouches[0].clientX;
	//   console.log(e.changedTouches[0].clientX)
	//   isMoving.value = true
	// }

	// const handleTouchMove = (e : any) => {
	//   if (isMoving.value) {
	//     moveX.value = e.changedTouches[0].clientX
	//     diffX.value = moveX.value - startX.value
	//     scrollLeft.value -= diffX.value
	//     startX.value = moveX.value
	//   }
	// }

	const handleTouchEnd = () => {
		isMoving.value = false
	}
	//随心配 多套 修改时间地址
	const edittimedz = (index : any) => {
		sxp_index.value = index
		console.log(sxp_index.value, '------------------------')
		setTimeout(() => {
			mealMate.value.open()
		}, 100)
	}
	//再来一单
	const tapOrderAg = async (itemList : any) => {
		// shopStore.setQrShop(itemList.nsell_member_id)
		await getSellerConfig()
		if (shopStore.hasShut && itemList.vtype_two != '920') {
			mapi.msg("该门店已打烊")
			return
		}
		shopStore.setOrderAgain(true)
		let shopGps = await getStoreList({
			vIsFirstShop: '猪会飞',
			curPage: 1,
			pageSize: 200,
			sellShopId: itemList.nsell_member_id,
			longitude: 113.06463,
			latitude: 28.208399,
			sku: '',
			vtype_two_category: 0,
		})
		let shopStorData : any = []
		if (shopGps.result) {
			for (let key in shopGps.object) {
				let item = shopGps.object[key]
				shopStorData.push(item)
			}
		}
		let params : any = {}
		if (itemList.vtype_two == '920') {
			params.patten = 'SUBSCRIBE'
		}
		params.sellMemberIds = itemList.nsell_member_id
		params.localInfo = {
			lo: shopStorData.length > 0 && shopStorData[0].vgps ? shopStorData[0].vgps.split(',')[0] : '113.064388',
			la: shopStorData.length > 0 && shopStorData[0].vgps ? shopStorData[0].vgps.split(',')[1] : '28.208595',
		}

		params.shopParams = itemList.billGoods.map((item : any) => {
			if (item.vtwo_type != '813') {
				let labelIdsArray = item.labels ? item.labels.map((item : any) => item.id) : []
				return {
					sku: item.sku,
					nums: item.nsell_nums,
					shopType: '0',
					defaultServiceType: "795",
					labelIds: labelIdsArray,
					isVip: item.vipFlag == '5' ? '1' : '0',
					specialId: item.specialId,
					type: item.vtwo_type == '813' ? 'dp' : 'sp'
				}
			} else { //套餐
				let detailsArry = item.sxpGoods.map((sitem : any) => {
					return {
						dynamic_conver_group_id: sitem.sxp_group_id,
						labelIds: sitem.labelIds || [],
						sku: sitem.sku,
						nums: sitem.nsell_nums,
					}
				})
				return {
					dynamic_id: item.sxp_goods_id,
					nums: item.sxp_nsell_nums,
					details: detailsArry,
					type: item.vtwo_type == '813' ? 'dp' : 'sp'
				}
			}

		})
		// params.shopParams = getShopParams(itemList.billGoods);

		let obj = { id: '3', source: 'orderDetial', action: 'addCarsDet', shopResult: params }
		console.log('再次购买----------', obj)
		uni.setStorageSync('menuact', obj)
		uni.switchTab({
			url: "/pages/index/menu/menu"
		})
	}
	// const getShopParams = (items) => {
	//     return items.map((item: any) => {
	//         const labelIdsArray = item.labels ? item.labels.map((label: any) => label.id) : [];
	//         return {
	//             sku: item.sku,
	//             nums: item.nsell_nums,
	//             shopType: '0',
	//             defaultServiceType: "795",
	//             labelIds: labelIdsArray,
	//             isVip: item.vipFlag === '5' ? '1' : '0',
	//             specialId: item.specialId
	//         };
	//     });
	// };

	const tabSelect = (item : any, index : any) => {
		nowChangeState.value = item.orderState
		tabCur.value = index
		console.log('tab切换index-------------', index, tabCur.value)
		if (index == 3) {
			orderData.value = []
			loadList('refeash', 'getorderRefundData')
		} else {
			orderData.value = []
			loadList('refeash')
		}

	}

	// 去详情
	const toDetails = (item : any) => {
		// let {status,type,Invoicing,text,activeType} = item
		mnavTo('/pages/order/orderDetails/orderDetails?vbill_id=' + item.vbill_id + '&activeType=' + '' + '&type=' + '1' + '&needInvoiceId=' + item.needInvoiceId)
	}
	//套餐退款
	const dpBackMoney = () => {
		console.log('申请退款')
		refundTipsRef.value.open()
	}
	const showMore = (e, item : any, index : any) => {
		minfindex.value = null;
		console.log(e)
		orderData.value.forEach((item : any, idx : number) => {
			// 将除了当前点击的项以外的其他项的 show 属性设为 false
			// if (idx !== index) {
			// }
			idx == index ? item.show = !item.show : item.show = false;
		});
		// orderData.value[index].show = !orderData.value[index].show;
	}

	const initModal = () => {
		nextTick(() => {
			console.log('关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭')
			orderData.value.forEach((item) => {
				item.show = false;
			});
		})

		console.log('object', orderData.value);
	}
	const footerSwitch = (listIndex : any, item : any, itemMenu : any) => {
		minfindex.value = listIndex
		console.log('更多----------------------------------------------', item)
		if (itemMenu.id == 2) {
			uni.showModal({
				title: '提示',
				content: '删除订单？',
				confirmColor: '#2AB05E',
				success: function (e) {
					if (e.confirm) {
						deleOrder(item.vbill_id)
					}
				}
			})
		} else if (itemMenu.id == 4) {
			//feedback/feedback
			mnavTo('/pages/user/feedback/feedback?vbill_id=' + item.vbill_id)
		} else if (itemMenu.id == 3) {
			// mnavTo('/pages/order/applicationRefund/applicationRefund?vbill_id=' + item.vbill_id)
			mnavTo(`/pages/order/applicationRefund/applicationRefund?vbill_id=${item.vbill_id}&shopName=${item.sellMemberName||''}`)
		} else if (itemMenu.id == 1) {
			console.log('开发票----------------------------------------------', item.vbill_id)
			if (item.needInvoiceId) {
				mnavTo('/pages/others/completedDettial/completedDettial?needInvoiceId=' + item.needInvoiceId)
			} else {
				mnavTo('/pages/others/applyInvoic/applyInvoic?vbill_id=' + item.vbill_id + '&ntotal_money=' + item.ntotal_money + '&vfreight_money=' + item.vfreight_money)
			}

		}
	}

	const change = () => {
		console.log('触发动画')
	}

	const refresherrefresh = () => {
		refLoad.value = true
		setTimeout(() => {
			refLoad.value = false
		}, 500)
		loadList('refeash')
	}

	const scrolltolower = () => {
		if (tabCur.value == 3) { loadList('add', 'getorderRefundData') } else {
			loadList('add')
		}
	}

	//修改地址
	const changeAddress = (item : any) => {
		console.log(item)
	}
	//取消订单
	const cancelOrderBtn = async (item : any) => {
		uni.showModal({
			title: '提示',
			content: '取消订单',
			confirmColor: '#2AB05E',
			success: async res => {
				if (res.confirm) {
					try {
						showLoading()
						const apiCall = item.vstatus === '1139'
							? billDetailRefund({ vbill_id: item.vbill_id })
							: getCancelorder({ vbill_id: item.vbill_id });

						const response = await apiCall;

						if (!response.result) {
							mapi.msg("网络繁忙，请稍后再试!");
							return;
						}
						mapi.msg("订单取消成功");
						hideLoading();
						item.vstatus_name = item.vstatus === '1139' ? '退款中' : item.vstatus_name
						item.vstatus_name = item.vstatus === '206'?'已取消':item.vstatus_name
						
						item.vstatus = item.vstatus === '1139' ? '224' : item.vstatus
						item.vstatus=item.vstatus=='206'?'225':item.vstatus
						// orderData.value = []
						// loadList('refeash')
						// setTimeout(() => {
						// 	uni.switchTab({ url: '/pages/index/order/order' });
						// }, 1000);
						// let res = await getCancelorder({ vbill_id: id })
						// if (res.result) {
						// 	mapi.msg('取消订单成功!')
						// 	nextTick(() => {
						// 		orderData.value = []
						// 		loadList('refeash')
						// 	})
						// }
					} catch (e) {
						mapi.msg('网络繁忙，请稍后再试!')
					}
				}
			}
		})
	}
	// const cancelOrder = async (id:any) => {
	//   try{
	//       let res = await getCancelorder({
	//         vbill_id : id
	//       })
	//       console.log('取消订单返回-------------------------------',res)
	//       if(res.result){
	//         console.log('触发了吗')
	//         loadList('refeash')
	//         mapi.msg('取消订单成功!');
	//       }
	//    }catch (e) {
	//     hideLoading();
	//     mapi.msg('网络繁忙，请稍后再试!!');
	//   }
	// }
	//删除订单
	const deleOrder = async (id : any) => {
		try {
			let res = await getremoveOrder({
				billId: id
			})
			console.log('删除订单返回-------------------------------', res)
			if (res.result) {
				orderData.value = []
				loadList('refeash')
				mapi.msg('删除成功!');
			}
		} catch (e) {
			hideLoading();
			mapi.msg('网络繁忙，请稍后再试!!');
		}
	}
	const paySuccess = () => {
		loadList('refeash')
	}
	//订单列表
	const loadList = async (source : any, fnName ?: any) => {
		loadStatus.value = 'loading'
		if (source == 'refeash') {
			pageInfo.value.curPage = 1
			pageInfo.value.backCupPage = 2
		}
		if (pageInfo.value.curPage > pageInfo.value.backCupPage && source != 'refeash') {
			console.log("没有更多啦")
			// mapi.msg('没有更多啦')
			loadStatus.value = 'noMore'
			return
		}
		showLoading()
		try {
			loadedList.value = false;
			const res = fnName === 'getorderRefundData'
				? await getorderRefundData({ curPage: pageInfo.value.curPage, pageSize: pageInfo.value.pageSize, status: nowChangeState.value })
				: await getorderData({ curPage: pageInfo.value.curPage, pageSize: pageInfo.value.pageSize, status: nowChangeState.value });
			loadedList.value = true;
			if (!res.result || !res.object) {
				console.log('loadList++0')
				// if (res.shortMessage == '用户未登录') {
				// 	mnavTo('/pages/login/login')
				// }
				// loadedList.value = false
				loadStatus.value = 'noMore'
				hideLoading()
				return
			}
			let nres = res.object || [],npage = res.page||{};
			console.log('loadList++1')
			hideLoading()
			if (nres.length == 0) {
				loadStatus.value = 'noMore'
				return
			}
			console.log('loadList++2')
			loadStatus.value = npage.curPage == npage.nextPage?'noMore':'more';
			pageInfo.value.curPage += 1
			pageInfo.value.backCupPage = npage.totalPage || 0
			if (source == 'refeash') {
				orderData.value = []
			}

			console.log('loadList++3')
			// 1183先点套餐 1184周期套餐 1185开通套餐    
			//813单套 814多套-约餐 815普通订单-开通套餐
			nres.forEach((item : any) => {
				let imageIds = [];  //图片
				let num = 0  //数量
				let address = ''
				num = item.billGoods.length;
				item.billGoods.forEach((citem : any) => {
					
					if (citem.vtwo_type == '813') {
						// 套餐-单套
						// order.totalsSells = item.sxpGoods.reduce((sum, item) => sum + item.nsell_nums, 0);
						 citem.sxpGoods.reduce((sum, sitem) =>{
							imageIds.push(sitem.skuImage ? sitem.skuImage : sitem.vmaster_product_image_id);
						}, 0);
						// citem.sxpGoods.forEach((img : any) => {
						// 	imageIds.push(img.skuImage ? img.skuImage : img.vmaster_product_image_id);
						// })
					} else if(citem.vtwo_type == '814'){
						citem.sxpGoods.reduce((sum, sitem) =>{
							imageIds.push(sitem.skuImage ? sitem.skuImage : sitem.vmaster_product_image_id);
						}, 0);
					}else{
						// 约餐
						// item.totalsSells = item.billGoods.reduce((sum, sitem) => sum + sitem.nsell_nums, 0);
						
						imageIds.push(citem.skuImage ? citem.skuImage : citem.vmaster_product_image_id);
					}
					// 多套
					if (item.vtype_two == '1185') {
						item.service_status = item.sxpDdx?item.sxpDdx.service_status:'';
					} else {
						item.service_status = '6';
					}

				})
				item.totalsSells =item.nums
				item.imageIds = imageIds;
				address = item.vaddress_detail;
				if (item.children) {  //有子单
					num = item.children.length
					address = item.children[0].vaddress_detail
					item.children.forEach((k : any) => {
						k.billGoods.forEach((l : any) => {
							imageIds.push(l.skuImage ? l.skuImage : l.vmaster_product_image_id);
						})
						item.imageIds = imageIds;
					})
				}
				item.address = address;
				item.show = false;
				item.num = num;
				item.menuHandle = [  //全部显示
					{
						text: '投诉',
						id: 4
					},
				];
				// if (item.vstatus !== '206' || item.vstatus !== '225' || item.vstatus !== '224' || item.vstatus !== '310' || item.vstatus !== '311' ||  !item.needInvoiceId) {
				//    item.menuHandle.push({
				//        text: '退款1'
				//        id:3
				//    });
				// }
				//   申请退款:除了206、225其他都显示 224退款中  310退款完成  311退款拒绝
				// if ( !item.needInvoiceId && item.vstatus !== '224'  && item.vstatus !== '225' && item.vstatus !== '310' && item.vstatus !== '206') {
				//     item.menuHandle.push({
				//         text: '退款'
				//     });
				// }
				if (item.vstatus == '225' || item.vstatus == '827' || item.vstatus == '61' || item.vstatus == '223' || item.vstatus == '224' || item.vstatus == '310' || item.vstatus == '297' || item.vstatus == '206') { //  
					item.menuHandle.push({
						text: '删除',
						id: 2
					});
				}
				// if (!item.needInvoiceId && (item.vstatus === '827' || item.vstatus === '61' || item.vstatus === '297')) { // 已经完成
				// 	item.menuHandle.unshift({
				// 		text: '开发票'
				//    id:1
				// 	},);
				// }
			})
			orderData.value = orderData.value.concat(nres);// [...orderData.value, ...nres]
			console.log('详情------------------------------------------------，', orderData.value)
			// orderData.value.length > 0 && orderData.value.forEach(order => {
			// 	order.billGoods.forEach(item => {
			// 		if (item.vtwo_type == '813') {
			// 			order.totalsSells = item.sxpGoods.reduce((sum, item) => sum + item.nsell_nums, 0);
			// 			// console.log(order.totalsSells, "我是套餐我是套餐我是套餐")
			// 		} else {
			// 			order.totalsSells = order.billGoods.reduce((sum, item) => sum + item.nsell_nums, 0);
			// 			// console.log(order.totalsSells, "我是单品")
			// 		}
			// 	})
			// });
			// console.log(orderData.value, "orderData.value")
			// let finalItmSubBtns = orderData.value[orderData.value.length - 1].menuHandle.length
			// if (finalItmSubBtns == 1) {
			// 	orderStylesFinal.value.top = '0rpx'
			// } else if (finalItmSubBtns == 1) {
			// 	orderStylesFinal.value.top = '-80rpx'
			// } else {
			// 	orderStylesFinal.value.top = '-160rpx'
			// }
		} catch (e) {
			console.error(e)
			hideLoading();
			// loadedList.value = false
			//TODO handle the exception
			loadStatus.value = 'noMore'
		}
	}
	const transTime = (t : any = '') => {
		let r = '';
		if (t) {
			r = t.toString().slice(0, 8).replace(/(\d{4})(\d{2})(\d{2})/, '\$1-\$2-\$3')
		}
		return r
	}
</script>


<style lang="scss">
	page {
		background-color: #F1F1F1;
	}

	.flexdis {
		display: flex;
		flex-direction: column;
	}

	.emptyActives {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.activeShow {
		transform: scale(1) !important;
		opacity: 1 !important;
	}

	.order-footer-menu {
		.active {
			background: rgba(76, 162, 123, 0.10);
			color: rgba(76, 162, 123, 0.85);
		}

		text {
			width: 127.504rpx;
			height: 64.938rpx;
			transition: .5s all;
			justify-content: center;
			display: flex;
			align-items: center;
			font-size: 32rpx;
		}
	}

	.men-posi {
		width: 100%;
		color: #666;
		font-feature-settings: 'clig' off, 'liga' off;
		font-family: "Microsoft YaHei UI";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 150%;
		/* 24px */
	}

	.status-3-4-color {
		color: #666 !important;
	}

	.status-3-4-colorBg {
		color: #666 !important;
		border: 1px solid #999 !important;
	}

	.posi {
		width: 88rpx;
		background-color: red;
		height: 34.3rpx;
		border-radius: 0px 9px 0px 9px;
		position: absolute;
		right: 0;
		top: 0;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF8C00;
		background-color: #FFF8E4;
		text-align: center;
	}

	.item {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		background-color: #f1f1f1;
		margin-right: 20rpx;

		.img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
	}

	.scroll-view {
		width: 500rpx;
		white-space: nowrap;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* 隐藏滚动条 for Firefox */
		-ms-overflow-style: none;

		/* 隐藏滚动条 for Internet Explorer and Edge */
		&::-webkit-scrollbar {
			display: none;
			/* 隐藏滚动条 for Chrome, Safari, and Opera */
		}
	}

	.content-con {
		display: flex;
		padding: 10px 0;
	}

	.header-con {
		width: 100%;
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 2222;
	}

	// .ormbxline{
	// 	overflow: hidden;
	// }
	.morbox {
		position: absolute;
		width: 240rpx;
		height: 0; //128rpx  158rpx
		line-height: 64rpx;
		left: -12rpx;
		bottom: 34rpx;
		z-index: 3;
		padding: 0;
		overflow: hidden;
		padding: 0 20rpx 0 20rpx;
		// transform-origin: left bottom;

		&.show {
			height: auto;
			transition: height 0.1s ease-out;
		}

		&.down {
			transform-origin: center top;

		}

		.mctbox {
			border-radius: 2px 2px 4px 4px;
			// height: 128rpx;//128rpx
			padding: 40rpx 0;
			box-shadow: 0px 3rpx 6rpx -4rpx rgba(0, 0, 0, 0.12), 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.08), 0px 9rpx 20rpx 8rpx rgba(0, 0, 0, 0.05);
		}

		.act {
			background: rgba(76, 162, 123, 0.10);
			color: rgba(76, 162, 123, 0.85);
		}

	}

	.sanjiao {
		position: relative;

		&.up {
			&:before {
				border-top: none;
				top: -16rpx;
				border-bottom-color: #fff;
			}
		}

		&:before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			align-self: center;
			position: absolute;
			border: 16rpx solid transparent;
			bottom: -16rpx;
			left: 28rpx;
			border-bottom: none;

			border-top-color: #fff;
			z-index: 1;
		}

	}

	.order-li-imglist-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 0;
		position: relative;

		.order-li-imglist-pic {
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 700;
		}

		.order-li-imglist-num {
			color: #999;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-weight: 400;
			position: relative;
		}

		&::after {
			content: '';
			width: 2rpx;
			height: 150rpx;
			// opacity: 0.2;
			// background: linear-gradient(90deg, #FFF 0%, #313131 47.9%, #FFF 100%);
			position: absolute;
			opacity: 0.5;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(133, 133, 133, 0.46) 46.5%, rgba(0, 0, 0, 0.00) 88.58%);
			left: -40rpx;
			top: 60%;
			transform: translateY(-50%);
			z-index: 222;
		}
	}

	.order-ul {
		// padding-bottom: 60rpx;
		height: calc(100vh - 50rpx);

		.order-li {
			margin-bottom: 30rpx;
			width: 694rpx;
			margin: 20rpx auto 0;
			border-radius: 20rpx;
			background: #FFF;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
		}

		.order-li-footer {
			padding: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.order-l-f-left {
				width: 120rpx;
				color: #999;
				font-family: "Microsoft YaHei UI";
				font-size: 28rpx;
				font-weight: 400;
				position: relative;
			}

			.order-l-f-right {
				display: flex;
				justify-content: space-between;

				text {
					padding: 12rpx 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 20rpx;
					flex-shrink: 0;
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-weight: 400;
					border-radius: 36px;
				}

				.cancel {
					border: 1px solid #999;
					color: #666;
				}

				.payment {
					border-radius: 36px;
					background: #53A87F;
					color: #fff;
				}

				.anotherOrder {
					border: 1px solid #53A87F;
					color: #53A87F;
				}

				.another-font {
					font-size: 28rpx !important;
				}
			}
		}

		.order-li-imglist {
			padding: 0 26rpx;
			display: flex;
			justify-content: space-between;

			.order-li-imglist-left {
				width: 80%;
				display: flex;

				.order-img-con {
					margin-right: 20rpx;
				}

				.img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}
		}

		.order-li-text {
			display: flex;
			padding: 30rpx 26rpx 20rpx 26rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #F8F8F8;

			.order-li-text-left {
				display: flex;
				align-items: center;
			}

			.order-li-text-ws {
				display: flex;
				border-radius: 3px;
				border: 1px solid #53A87F;
				background: rgba(44, 172, 88, 0.10);
				width: 88.99rpx;
				height: 42rpx;
				color: #53A87F;
				font-family: "Microsoft YaHei UI";
				font-size: 24rpx;
				font-weight: 400;
				align-items: center;
				margin-right: 20rpx;
				justify-content: center;
			}

			.order-li-text-tc {
				border-radius: 3px;
				border: 1px solid #FDB44A;
				background: rgba(253, 180, 74, 0.10);
				color: #FDB44A;
			}

			.order-li-text-dz {
				color: #333;
				font-feature-settings: 'clig' off, 'liga' off;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 350rpx;
				font-weight: 400;
			}

			.order-li-text-right {
				position: relative;
				align-items: center;
				display: flex;
				text-align: right;

				.yijguoqi {
					color: #333;
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}

				.moneryTe {
					color: #FC4C40;

					text {
						color: #333;
					}
				}

				.order-li-text-fk {
					color: #53A87F;
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 400;
					margin-left: 10rpx;
					line-height: normal;
				}
			}
		}

		.order-li-title {
			border-radius: 10px 10px 0px 0px;
			background: #FFF8E4;
			display: flex;
			padding-left: 26rpx;
			align-items: center;
			height: 75.946rpx;
			color: #666;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-weight: 400;

			.title-color {
				color: #FC4C40;
				margin: 0 5rpx;
			}
		}
	}

	.header-tab {
		width: 694rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		position: relative;

		text {
			color: #666;
			font-size: 32rpx;
			font-weight: 400;
			padding: 0 0 20rpx 0;
			box-sizing: border-box;
			position: relative;

			&.active {
				color: #000;
			}

			&::after {
				position: absolute;
				bottom: 0;
				left: 0;
				content: '';
				width: 40rpx;
				height: 4.14rpx;
				border-radius: 56rpx;
				background: #53A87F;
				opacity: 0;
				transition: all 0.3s;
				transform: translateX(-50%);
			}
		}

		.line {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 40rpx;
			/* 根据Tab数量调整宽度 */
			height: 4.14rpx;
			border-radius: 56rpx;
			background: #53A87F;
			transition: all 0.3s;
		}
	}

	.mpitm:nth-child(n+2) {
		margin-top: 10rpx;
	}

	.packageOption {
		justify-content: space-around;

		.dtaocan {
			color: #666;
			font-size: 32rpx;
			font-weight: 400;
		}

		.fwyxianqi {
			color: #999;
			font-size: 28rpx;
			font-weight: 400;
		}
	}

	.flexClass {
		display: flex;
		justify-content: flex-end;
		color: #53A87F;
	}

	.flexClassguoqi {
		display: flex;
		justify-content: flex-end;
	}
	.containOvers{
		width:100vw;
		height:100vh;
		overflow: hidden;
	}
</style>